<template>
  <view class="px-20rpx">
    <view>
      <nut-cell title="选择反馈类型" is-link @click="show = true" :desc="popupDesc"></nut-cell>
    </view>
    <view bg-white rounded-20rpx>
      <nut-textarea
        :customStyle="{backgroundColor: 'transparent', borderRadius: '20rpx', padding: '20rpx 30rpx', height: '300rpx' }"
        :border="false"
        :border-bottom="false"
        v-model="feedBack.context"
        type="textarea"
        placeholder="请输入反馈信息"></nut-textarea>
    </view>
    <view bg-white h-104rpx mt-20rpx rounded-20rpx>
      <nut-input
        type="number"
        max-length="11"
        :customStyle="{borderRadius: '20rpx'}"
        :input-style="{height: '104rpx', padding: '0 30rpx'}"
        :border="false"
        :border-bottom="false"
        v-model="feedBack.mobile"
        placeholder="请输入您的手机号"></nut-input>
    </view>
    <view class="feedBack-box mt-20rpx">
      <view>
        <view text-24rpx>上传图片（最多2张）</view>
        <view pt-40rpx>
          <uploader
            @success="
              ($event: any) => {
                feedBack.images.push($event)
              }
            "
            @delete="
              ($event: any) => {
                feedBack.images.splice($event, 1)
              }
            "
            :maxNum="2" />
        </view>
      </view>
    </view>
    <view w-full px-40rpx pb-46rpx pt-20rpx box-border fixed bottom-0 style="position: fixed;">
        <view
          w-670rpx
          h-100rpx
          rounded-50rpx
          bg="#FCC300"
          flex
          justify-center
          items-center
          font-500
          text="#000"
          text-32rpx
          :loading="loading" @click="feedbackSubmit">
          提交
        </view>
      </view>
    <nut-popup v-model:visible="show" position="bottom" safe-area-inset-bottom>
      <nut-picker
        v-model="feedBack.type"
        :columns="columns"
        title="选择反馈类型"
        @confirm="onConfirm"
        @cancel="show = false"></nut-picker>
    </nut-popup>
  </view>
</template>

<script setup lang="ts">
import type { PickerBaseEvent } from 'nutui-uniapp'
import { feedback } from '@/api/member'
import uploader from '@/components/upload/index.vue'
// import { InputStyle, colors } from '@/constants/injection-key'
// import * as TEST from '@/utils/test'
// import submit from '@/components/sheet-btn/index.vue'

const show = ref<boolean>(false)
const popupDesc = ref<string>('')

function onConfirm({ selectedValue, selectedOptions }: PickerBaseEvent) {
  console.log(selectedValue, selectedOptions)

  popupDesc.value = selectedOptions.map((item) => item.text).join(',')
  show.value = false
}

const loading = ref<boolean>(false)
const feedBack = reactive<any>({
  type: 'FUNCTION', //默认反馈问题为 '功能相关'
  mobile: '',
  context: '',
  images: []
})

const columns = [
  { text: '功能相关', value: 'FUNCTION' },
  { text: '优化反馈', value: 'OPTIMIZE' },
  { text: '其他', value: 'OTHER' }
]


// 提交意见反馈
const feedbackSubmit = async () => {
  if (!feedBack.type) {
    uni.showToast({
      title: '请填写反馈类型',
      duration: 2000,
      icon: 'none'
    })
    return false
  }
  if (!feedBack.context) {
    uni.showToast({
      title: '请填写反馈信息',
      duration: 2000,
      icon: 'none'
    })
    return false
  }

  // if (!feedBack.mobile || !TEST.default.mobile(feedBack.mobile)) {
  //   uni.showToast({
  //     title: '请填写您的正确手机号',
  //     duration: 2000,
  //     icon: 'none'
  //   })
  //   return false
  // }

  if (feedBack.images && feedBack.images.length) {
    feedBack.images = feedBack.images.join(',')
  }
  uni.showLoading({ title: '正在提交...', mask: true })

  // verify true
  loading.value = true
  const res = await feedback(feedBack)
  loading.value = false
  if (res.data.success) {
    uni.showToast({
      title: '提交成功!',
      icon: 'none'
    })
    setTimeout(() => {
      uni.navigateBack()
    }, 500)
  }
}
</script>
<style>
page {
  --nut-picker-ok-color: #FCC300;
  --nut-cell-color: #000;
  --nut-cell-desc-color: #000;
  --nut-cell-border-radius: 20rpx;
}
</style>
<style scoped lang="scss">

.feedBack-box {
  background: #fff;
  border-radius: 20rpx;
  padding: 32rpx 22rpx;
  margin-bottom: 40rpx;
}

.feedBack-box:nth-of-type(1) {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}


</style>
